<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Task Management UI</title>
		<link rel="preconnect" href="https://fonts.gstatic.com">
		<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&amp;display=swap" rel="stylesheet">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
		<link rel="stylesheet" href="./task.css"/>
	</head>
	<body>
		<!-- Working version of https://dribbble.com/shots/14552329--Exploration-Task-Management-Dashboard -->
		<div class='app'>
		  <main class='project'>
		    <div class='project-info'>
		      <h1>Homepage Design</h1>
		      <div class='project-participants'>
		        <span></span>
		        <span></span>
		        <span></span>
		        <button class='project-participants__add'>Add Participant</button>
		          
		        </div>
		    </div>
		    <div class='project-tasks'>
		      <div class='project-column'>
		        <div class='project-column-heading'>
		          <h2 class='project-column-heading__title'>Task Ready</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
		        </div>
		        <div class='task' draggable='true'>
		          <div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
		          <p>Konsep hero title yang menarik</p>
		          <div class='task__stats'>
		            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
		            <span><i class="fas fa-comment"></i>3</span>
		            <span><i class="fas fa-paperclip"></i>7</span>
		            <span class='task__owner'></span>
		          </div>
		        </div>
		        
		                <div class='task' draggable='true'>
		          <div class='task__tags'><span class='task__tag task__tag--design'>UI Design</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
		          <p>Icon di section our services</p>
		          <div class='task__stats'>
		            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
		            <span><i class="fas fa-comment"></i>2</span>
		            <span><i class="fas fa-paperclip"></i>5</span>
		            <span class='task__owner'></span>
		          </div>
		        </div>
		        
		                <div class='task' draggable='true'>
		          <div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
		          <p>Konsep hero title yang menarik</p>
		          <div class='task__stats'>
		            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
		            <span><i class="fas fa-comment"></i>2</span>
		            <span><i class="fas fa-paperclip"></i>3</span>
		            <span class='task__owner'></span>
		          </div>
		        </div>
		      </div>
		      <div class='project-column'><div class='project-column-heading'>
		          <h2 class='project-column-heading__title'>In Progress</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
		        </div>
		          
		        <div class='task' draggable='true'>
		          <div class='task__tags'><span class='task__tag task__tag--design'>UI Design</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
		          <p>Replace lorem ipsum text in the final designs</p>
		          <div class='task__stats'>
		            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
		            <span><i class="fas fa-comment"></i>5</span>
		            <span><i class="fas fa-paperclip"></i>5</span> 
		            <span class='task__owner'></span>
		          </div>
		        </div>
		        
		        <div class='task' draggable='true'>
		          <div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
		          <p>Create and generate the custom SVG illustrations.</p>
		          <div class='task__stats'>
		            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
		            <span><i class="fas fa-comment"></i>8</span>
		            <span><i class="fas fa-paperclip"></i>7</span>
		            <span class='task__owner'></span>
		          </div>
		        </div>
		        
		        <div class='task' draggable='true'>
		          <div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
		          <p>Proof read the legal page and check for and loopholes</p>
		          <div class='task__stats'>
		            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
		            <span><i class="fas fa-comment"></i>12</span>
		            <span><i class="fas fa-paperclip"></i>11</span>
		            <span class='task__owner'></span>
		          </div>
		        </div>
		        
		        <div class='task' draggable='true'>
		          <div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
		          <p>Create the landing page graphics for the hero slider.</p>
		          <div class='task__stats'>
		            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
		            <span><i class="fas fa-comment"></i>4</span>
		            <span><i class="fas fa-paperclip"></i>8</span>
		            <span class='task__owner'></span>
		          </div>
		        </div>
		        
		        </div>
		      <div class='project-column'><div class='project-column-heading'>
		          <h2 class='project-column-heading__title'>Needs Review</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
		        </div>
		          
		        <div class='task' draggable='true'>
		          <div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
		          <p>Check the company we copied doesn't think we copied them.</p>
		          <div class='task__stats'>
		            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
		            <span><i class="fas fa-comment"></i>4</span>
		            <span><i class="fas fa-paperclip"></i>0</span>
		            <span class='task__owner'></span>
		          </div>
		        </div>
		        <div class='task' draggable='true'>
		          <div class='task__tags'><span class='task__tag task__tag--design'>UI Design</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
		          <p>Design the about page.</p>
		          <div class='task__stats'>
		            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
		            <span><i class="fas fa-comment"></i>0</span>
		            <span><i class="fas fa-paperclip"></i>5</span>
		            <span class='task__owner'></span>
		          </div>
		        </div>
		        <div class='task' draggable='true'>
		          <div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
		          <p>Move that one image 5px down to make Phil Happy.</p>
		          <div class='task__stats'>
		            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
		            <span><i class="fas fa-comment"></i>2</span>
		            <span><i class="fas fa-paperclip"></i>2</span>
		            <span class='task__owner'></span>
		          </div>
		        </div>
		        </div>
		      <div class='project-column'><div class='project-column-heading'>
		          <h2 class='project-column-heading__title'>Done</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
		        </div>
		        
		         <div class='task' draggable='true'>
		          <div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
		          <p>Send Advert illustrations over to production company.</p>
		          <div class='task__stats'>
		            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
		            <span><i class="fas fa-comment"></i>12</span>
		            <span><i class="fas fa-paperclip"></i>5</span>
		            <span class='task__owner'></span>
		          </div>
		        </div>
		        
		         <div class='task' draggable='true'>
		          <div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
		          <p>Dawn wants to move the text 3px to the right.</p>
		          <div class='task__stats'>
		            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
		            <span><i class="fas fa-comment"></i>3</span>
		            <span><i class="fas fa-paperclip"></i>7</span>
		            <span class='task__owner'></span>
		          </div>
		        </div>
		        
		         <div class='task' draggable='true'>
		          <div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
		          <p>Amend the contract details.</p>
		          <div class='task__stats'>
		            <span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
		            <span><i class="fas fa-comment"></i>8</span>
		            <span><i class="fas fa-paperclip"></i>16</span>
		            <span class='task__owner'></span>
		          </div>
		        </div>
		        
		        </div>
		      
		    </div>
		  </main>
		  <aside class='task-details'>
		    <div class='tag-progress'>
		      <h2>Task Progress</h2>
		      <div class='tag-progress'>
		        <p>Copywriting <span>3/8</span></p>
		        <progress class="progress progress--copyright" max="8" value="3"> 3 </progress>
		      </div>
		      <div class='tag-progress'>
		        <p>Illustration <span>6/10</span></p>
		        <progress class="progress progress--illustration" max="10" value="6"> 6 </progress>
		      </div>
		      <div class='tag-progress'>
		        <p>UI Design <span>2/7</span></p>
		        <progress class="progress progress--design" max="7" value="2"> 2 </progress>
		      </div>
		    </div>
		    <div class='task-activity'>
		      <h2>Recent Activity</h2>
		      <ul>
		        <li>
		          <span class='task-icon task-icon--attachment'><i class="fas fa-paperclip"></i></span>
		          <b>Andrea </b>uploaded 3 documents
		          <time datetime="2021-11-24T20:00:00">Aug 10</time>
		        </li>
		          <li>
		              <span class='task-icon task-icon--comment'><i class="fas fa-comment"></i></span>
		          <b>Karen </b> left a comment
		          <time datetime="2021-11-24T20:00:00">Aug 10</time>
		        </li>
		         <li>
		             <span class='task-icon task-icon--edit'><i class="fas fa-pencil-alt"></i></span>
		          <b>Karen </b>uploaded 3 documents
		          <time datetime="2021-11-24T20:00:00">Aug 11</time>
		        </li>
		          <li>
		              <span class='task-icon task-icon--attachment'><i class="fas fa-paperclip"></i></span>
		          <b>Andrea </b>uploaded 3 documents
		          <time datetime="2021-11-24T20:00:00">Aug 11</time>
		        </li>
		         <li>
		             <span class='task-icon task-icon--comment'><i class="fas fa-comment"></i></span>
		          <b>Karen </b> left a comment
		          <time datetime="2021-11-24T20:00:00">Aug 12</time>
		        </li>
		      </ul>
		    </div>
		  </aside>
		</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/all.min.js"></script>
		<script src="./task.js"></script>
	</body>
</html>